<template>
  <el-container
    direction="vertical"
    v-loading="pageLoading"
    element-loading-text="评判遴选页面加载中.."
    element-loading-spinner="el-icon-loading">
    <el-header
      class="examinateHeader"
      height="80px">
      <h2>
        {{testInfo.selectRecordSubjectName}}：主观题{{testInfo.problemNums}}题，总分{{testInfo.totalScore}}分
      </h2>
    </el-header>
    <el-main
      class="questionBody">
      <div v-for="(item,index1) in problemList" v-if="index1===currentProblemIndex" :key="item.problemId">
        <div class="queContent">
          <p> {{ index1 + 1 }}.
            <span>{{ item.problemCotent }}</span></p>

        </div>
        <div class="quetanswer">
          <div>
            <el-form :model="item">
              <el-form-item label="参考关键词:">
                <span>{{item.answer}}</span>
              </el-form-item>
              <el-form-item :label="'员工'+testInfo.userName+'的答案：'">
                <span>{{item.ownAnswer}}</span>
              </el-form-item>
              <el-form-item label="得分：">
                <el-input-number v-model="item.getScore" :max="item.score" :min="0"
                                 @change="handleNumberChange"></el-input-number>
                <span style="font-size: 20px;"> /{{item.score}}分</span>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="buttonGroup v-m">
          <el-button
            @click="prevQuestion(item, currentProblemIndex)"
            v-show="prebtnshow"
          >上一题：{{ currentProblemIndex + 1 }}/{{ problemList.length }}
          </el-button>
          <el-button
            @click="nextQuestion(item,currentProblemIndex)"
            v-show="nextbtnshow"
          >下一题：{{ currentProblemIndex + 1 }}/{{ problemList.length }}
          </el-button>
          <el-button
            @click="answerCommit(item, currentProblemIndex)" v-show="commitbtnshow"
          >提交遴选评判结果
          </el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import {
    getTestCustomAskSiutation,
    correctCustom,
  } from "./exam.js"

  export default {
    name: "markExam",
    data() {
      return {
        selectRecordId: null,
        userId: null,
        prebtnshow: false,
        nextbtnshow: true,
        commitbtnshow: false,
        pageLoading: false,
        currentProblemIndex: null,
        testInfo: {},
        problemList: []
      }
    },
    watch: {
      currentProblemIndex(val) {
        if (
          this.problemList !== null &&
          this.problemList.length > 1
        ) {
          if (val == this.problemList.length - 1) {
            this.commitbtnshow = true;
            this.prebtnshow = true;
            this.nextbtnshow = false;
          } else if (val == 0) {
            this.prebtnshow = false;
            this.nextbtnshow = true;
            this.commitbtnshow = false;
          } else if (
            val > 0 &&
            val < this.problemList.length - 1
          ) {
            this.prebtnshow = true;
            this.nextbtnshow = true;
            this.commitbtnshow = false;
          }
        } else if (this.problemList.length <= 1) {
          this.commitbtnshow = true;
          this.nextbtnshow = false;
          this.prebtnshow = false;
        }
      }
    },
    created() {
      if (this.$route.query.hasOwnProperty('selectRecordId') && this.$route.query.hasOwnProperty('userId')) {
        this.selectRecordId = this.$route.query.selectRecordId
        this.userId = this.$route.query.userId
        this.getTestCustomInfo();
        this.currentProblemIndex = 0;
      }
    },
    methods: {
      prevQuestion(item, currentProblemIndex) {
        this.currentProblemIndex--;
      },
      nextQuestion(item, currentProblemIndex) {
        /*提交当前题目的打分情况*/
        if (currentProblemIndex != this.problemList.length - 1) {
          let scoreData = {
            answerSheetId: item.answerSheetId,
            status: 1,//是否是批改的最后一道题，0：是最后一道自定义题目 1：不是最后一道自定义题目
            score: item.getScore,
          }
          this.correctCurrentProblem(scoreData);
        }
        this.currentProblemIndex++;
      },
      /*最后一题提交*/
      answerCommit(item, currentProblemIndex) {
        if (currentProblemIndex === this.problemList.length - 1) {
          let scoreData = {
            answerSheetId: item.answerSheetId,
            status: 0,//是否是批改的最后一道题，0：是最后一道自定义题目 1：不是最后一道自定义题目
            score: item.getScore,
          }
          this.correctCurrentProblem(scoreData);
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.push({
            name: 'detialInfo',
            query: {
              selectRecordId:this.selectRecordId,
            }
          })
        }
      },
      /*获取自定义题目列表*/
      getTestCustomInfo() {
        getTestCustomAskSiutation(this.selectRecordId, this.userId).then(response => {
          if (response.code === 20000) {
            this.testInfo = response.data;
            if (response.data.problemInfo.length != 0) {
              response.data.problemInfo.forEach(function (problem, index) {
                problem['getScore'] = 0;
              })
            }
            this.problemList = response.data.problemInfo;
          }
        })
      },
      /*得分数字Input change事件*/
      handleNumberChange(val) {
        this.$forceUpdate()
      },
      /*提交当前自定义题目的打分情况*/
      correctCurrentProblem(data) {
        correctCustom(data).then(response => {
          if (response.code === 20000) {
          }
        })
      }
    }
  }
</script>

<style scoped>
  @import "../../styles/common.css";
  @import "./examStyle.css";
</style>
